<template>
  <a-spin :spinning="loading">
    <a-card>
      <a-tabs @change="getChangeTab" style="background: #fff; padding: 0px 16px 8px 16px;" :animated="false"
        v-model="tabs">
        <a-tab-pane key="user_model" tab="用户板块"></a-tab-pane>
        <a-tab-pane key="doctor_model" tab="医生板块"></a-tab-pane>

      </a-tabs>
      <a-row :gutter="16">



        <a-col :span="8">

         <!-- <a-button v-if="type!='service_description'" @click="goCharts({dictType:type})" class="mx-8"
            type="primary">新增</a-button> -->
          <!--          <a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>-->
        </a-col>
      </a-row>
      <a-table style="display: none" bordered id="tableExport" class="mt-16 order-table" :columns="columns"
        :data-source="data" :scroll="scroll" :pagination="pagination">
        <template #status="status, data">
          {{ data.status == 1 ? '已上架' : '下架' }}
        </template>
        <template #createTime="createTime, data">
          {{ $utils.formatTimestamp(data.createTime)}}
        </template>
        <template #picUrl="picUrl, data">
          <PreviewImage :value="getPhotos('https://pages.c-ctrip.com/carisd/app/111824.png')" />
        </template>

      </a-table>
      <a-table class="mt-16 order-table" :columns="type!='service_description'?columns:columns1" :data-source="data"
        :scroll="scroll" :pagination="pagination">

        <template #remark="remark, data">
          {{data.remark=='1'?'开启':'关闭' }}
        </template>
        <template #picUrl="picUrl, data">
          <PreviewImage v-if="data.picUrl" :value="getPhotos(data.picUrl)" />
        </template>

        <template #action="action, data">
          <a-button @click="getEdit(data,0)" class=" mr-10" type="danger"
            v-if="data.remark==1">
            关闭
          </a-button>
          <div style="display: flex;justify-content: center;" v-else>
            <a-button @click="getEdit(data,1)" class="mr-10" type="primary">
              开启
            </a-button>




          </div>
        </template>

      </a-table>
      <!-- <a-divider  /> -->
    </a-card>
    <particulars ref="particulars"></particulars>
    <create @upload="upload" ref="create"></create>
    <Edit ref="edit" @success="search" />
  </a-spin>
</template>
<script>
  import FileSaver from 'file-saver'
  import * as XLSX from 'xlsx'
  import create from './components/create.vue'
  import Edit from './components/edit'
  import particulars from './components/particulars'
  import {
    dictDataList,
    dictDataDelete,updateDataType
  } from '@/api/newPet'
  import {
    tableMixins
  } from '@/utils/mixins'
  export default {
    mixins: [tableMixins],
    components: {
      particulars,
      create,
      Edit
    },
    data() {
      return {
        loading: false,
        type: 'user_model',
        tabs: 'user_model',
        name: '', //分类名称
        data: [{
          id: 1111,
          travellerName: '',
          status: 1
        }],
        columns: [{
            title: '序号',
            dataIndex: 'id',
            align: 'center',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '类目名称',
            dataIndex: 'label',

            align: 'center',
            scopedSlots: {
              customRender: 'label'
            },
          },

          {
            title: '状态',
            dataIndex: 'remark',

            align: 'center',
            scopedSlots: {
              customRender: 'remark'
            },
          },
          {
            title: '操作',
            fixed: 'right',
            dataIndex: 'action',
            width: 160,
            scopedSlots: {
              customRender: 'action'
            },
            align: 'center'
          }
        ],
        columns1: [{
            title: '序号',
            dataIndex: 'id',
            align: 'center',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '类目名称',
            dataIndex: 'label',

            align: 'center',
            scopedSlots: {
              customRender: 'label'
            },
          },
          {
            title: '说明',
            dataIndex: 'remark',

            align: 'center',
            scopedSlots: {
              customRender: 'remark'
            },
          },

          {
            title: '发布时间',
            dataIndex: 'createTime',

            align: 'center',
            scopedSlots: {
              customRender: 'createTime'
            },
          },
          {
            title: '操作',
            fixed: 'right',
            dataIndex: 'action',
            width: 160,
            scopedSlots: {
              customRender: 'action'
            },
            align: 'center'
          }
        ],

      }
    },
    computed: {

    },
    watch: {

    },
    async created() {

    },
    mounted() {
      this.search()
    },
    methods: {
      async getEdit(data,type){
        data.remark=type
        updateDataType(data)
        this.$message.success('操作成功')
      
      },
      getChangeTab(e) {
        this.type = e
        this.search()
      },
      getPhotos(img) {

        return img.split(",")
      },

      search() {
        this.pageNum = 1
        this.getData()
      },
      upload() {
        this.search()
      },
      delect(data) {
        this.$confirm({
          title: '删除',
          content: `请确认是否删除该条信息`,
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk: () => {

            this.loading = true
            dictDataDelete({
                id: data.id
              })
              .then((res) => {
                this.$message.success('删除成功！')

                this.search()

                this.loading = false
              })
              .finally(() => (this.loading = false))

          },
        })
      },
      goCharts(data) {
        this.$refs.create.open(data)
      },
     
      getSearchParams() {
        return {
          pageNo: this.pageNum,
          pageSize: this.rowsNum,
          type: this.type
        }
      },
      getData() {
        this.loading = true
        dictDataList(this.getSearchParams()).then(data => {
          this.data = data
        }).finally(() => this.loading = false)
      },
      reset() {
        this.search()
        this.name = ''
      }
    }
  }
</script>
<style lang="less" scoped>
  .ant-col {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .label {
      flex-shrink: 0;
      width: 86px;
      text-align: right;
      font-size: 14px;
      color: #595959;
    }

    .w-full {
      flex: 1;
    }
  }
</style>